<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .A {
        width: 100%;
        height: 80px;
        background-color: rgb(43, 41, 41);
        position: relative;
        top: -10px;
    }
    .A img{
        margin-top: 8px;
        margin-left: 250px;
    }
    .A a{
        color: aliceblue;
        margin-left: 30px;
    }
    .A p{
        margin-left: 530px;
        margin-top: -45px;
        font-weight: 500;
        color: aliceblue;
    }
    .B {
        width: 100%;
        height: 380px;
        background-color: rgb(255, 255, 255);
        position: relative;
        text-align: center;
    }
    .C {
        width: 450px;
        height: 100px;
        background-color: rgb(254, 255, 255);
        margin-top: 20px;
        margin-left: 570px;
        position: relative;
        text-align: center;
    }

    .D {
        width: 1500px;
        height: 300px;
        background-color: rgb(253, 250, 246);
        margin-left: 100px;
        margin-top: 40px;
        position: relative;
        
    }

    .dibuyemian {
        background-color: black;
        width: 100%;
        height: 150px;
        text-align: center;
        margin-top: 116px;
    }

    .dibuyemian span {
        margin-top: 30px;
        color: aliceblue;
    }

    .oo {
        background-color: aliceblue;
        width: 100%;
        height: 300px;
        text-align: center;
        margin-top: 116px;
    }
    .F{
        float: left;
        margin-top: 30px;
        margin-left: 100px;
    }
    .G{
        float: left;
        margin-top: 30px;
        margin-left: 70px;
    }
    .H{
        float: left;
        margin-top: 25px;
        margin-left: 70px;
    }
    .J{
        float: left;
        margin-top: 25px;
        margin-left: 60px;
    }
    .k{
        float: left;
        margin-top: 25px;
        margin-left: 60px;
    }
    .l{
        float: left;
        margin-top: 20px;
        margin-left: 60px;
    }
    a{
        text-decoration: none;
        overflow: hidden;
        color: rgb(78, 42, 207);
    }
    .qqqq{
        margin-left: 600px;
        margin-top: -40px;
    }
</style>

<body>
    <div class="A">
        <nav>
        <img src="./index/wangyiyun.png" alt="">
        <p>开放平台</p>
        </nav>
        <nav class="qqqq"> 
        <a style="color: white;" href="">首页</a>
        <a href="">活动接入</a>
        <a href="">文档中心</a>
        </nav>
    </div>
    <div class="B">
        <h1>云音乐开放平台</h1>
        <p>基于海量级听众用户，强大的内容、音频、推荐接口赋能</p>
    </div>
    <div class="C">
        <h1>一站式应用接入平台</h1>
        <p>多端能力快速接入，打造更具竞争力的应用</p>
    </div>
    <div class="D">
        <div class="F">
            <h3>移动应用</h3>
            <p>实现三方移动端与云</p><p>音乐移动端交互能力</p>
            <a href="">
                <p>了解更多</p>
            </a>
        </div>
        <div class="G">
            <h3>IOT 设备</h3>
            <p>音响、电视、手表等</p><p>设备使用云音乐 api 能力</p>
            <a href="">
                <p>了解更多</p>
            </a>
        </div>
        <div class="H">
            <h3>网易云音认证</h3>
            <p>网易云音乐推出的针</p><p>对耳机、音箱、汽车</p><p>等硬件设备厂商提供</p><p>的认证服务</p>
            <a href="">
                <p>了解更多</p>
            </a>
        </div>
        <div class="J">
            <h3>游戏联运接入</h3>
            <p>提供云音乐的分发能</p><p>力和运营资源，实现</p>游戏增长</p>
            <a href="">
                <p>了解更多</p>
            </a>
        </div>
        <div class="k">
            <h3>网页应用接入</h3>
            <p>使用云音乐 Web 端能</p><p>力</p>
            <a href="">
                <p>了解更多</p>
            </a>
        </div>
        <div class="l">
            <h3>活动接入</h3>
            <p>提供 JS-SDK 接入独</p><p>立项目；提供 url 转发</p><p>接入，使开发者接入</p><p>更加灵活</p>
            <a href="">
                <p>了解更多</p>
            </a>
        </div>
    </div>
    <div class="oo">
        <div class="zi">
            <h1>接入开发流程</h1>
        </div>
        <div class="tp">
            <img src="./index/t1.png" width="2%" alt="">
            <img src="./index/tcz1.png" width="2%" alt="">
            <img src="./index/t2.png" width="2%" alt="">
            <img src="./index/tcz1.png" width="2%" alt="">
            <img src="./index/t5.png" width="2%" alt="">
            <img src="./index/tcz1.png" width="2%" alt="">
            <img src="./index/t4.png" width="2%" alt="">
        </div>
    </div>
    <div class="dibuyemian">
        <span>服务条款| 隐私政策| 儿童隐私政策| 版权投诉| 投资者关系| 广告合作 | 联系我们</span><br>
        <span>廉正举报 不良信息举报邮箱: 51jubao@service.netease.com 客服热线;95163298</span><br>
        <span>互联网宗教信息服务许可证：浙(2022)0000120 增值电信业务经营许可证;浙B2-20150198 粤B2-20090191-18 浙ICP备15006616号-4
            工业和信息化部备案管理系统网站</span><br>
        <span>网易公司版权所有©1997-2025杭州乐读科技有限公司运营;浙网文[2024] 0900-042号 浙公网安备 33010802013307号 算法服务公示信息</span>
    </div>
</body>

</html>